<template>
	<div class="addBankCard">
		<!-- 订单信息 -->
		<van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
		<div class="content" v-if="cardType == 1">
			<van-cell-group inset style="margin-bottom: 18px;" v-for="(item,index) in cardList" :key="item.id">
				<van-cell title="中国银行" :value="item.bankname" />
				<van-cell title="手机号" :value="item.mobile" />

				<div
					style="padding:0.26667rem 0.42667rem;display:flex;align-items: center;justify-content: space-between;">
					<van-radio @click="changestatus(index)" label-disabled
						:checked="item.status == 1">当前提现默认选择</van-radio>
					<!-- <van-radio @click="changestatus(index)" label-disabled v-else>设为提现默认选择</van-radio> -->
					<van-button type="danger" size="small" @click="deleteListId(item.id)">删除</van-button>
				</div>

			</van-cell-group>
			<div>
				<van-button round block type="primary" native-type="submit" @click="addBand(2)">
					添加银行卡
				</van-button>
			</div>
		</div>
		<div class="content" v-else>
			<van-form @submit="onSubmit">
				<van-cell-group inset>
					<van-field v-model="dataList.bankholder" name="真实姓名" label="真实姓名" placeholder="请输入真实姓名"
						:rules="[{ required: true, message: '请填写真实姓名' }]" />
					<van-field v-model="dataList.banknumber" label="银行卡号" placeholder="请输入银行卡卡号" />
					<van-field v-model="dataList.bankname" label="开户银行" placeholder="请输入开户银行" />
					<van-field v-model="dataList.mobile" name="手机号" label="手机号" placeholder="请输入手机号"
						:rules="[{ required: true, message: '请填写手机号' }]" />
					<van-radio-group v-model="checked1" style="display: flex; margin-top: 10px;">
						<van-radio name="1" style="margin-right: 20px;">个人账户</van-radio>
						<van-radio name="2">对公账户</van-radio>
					</van-radio-group>
				</van-cell-group>
				<div style="margin-top: 18px;">
					<van-button round block type="primary" @click="addBand(1)">
						确认添加
					</van-button>
				</div>
			</van-form>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { reactive, ref, onMounted } from 'vue';
	import { Toast } from 'vant';
	import { addBankCard, getBankCard, changeDefault, deleteBank } from '../../../../api/index'

	const checked = ref<any>(false);
	const cardType = ref(history.state.type);
	const title = ref('银行卡管理')
	const checked1 = ref('1')
	//  银行卡列表
	interface IcardList {
		mobile : String,  // 手机号码
		bankname : String,  //  银行名称
		bankholder : String,  //  持有人姓名
		banknumber : String,  //  银行卡号
		status : any, //  状态
		type : String,
		id : string
	}
	const dataList = reactive({
		mobile: '',  // 手机号码
		bankname: '',  //  银行名称
		bankholder: '',  //  持有人姓名
		banknumber: '',  //  银行卡号
	})
	//  银行卡列表
	const cardList = ref<IcardList[]>([]);
	console.log(cardList);
	//  删除
	const deleteListId = (id : any) => {
		console.log(id);
		let formData = new FormData();
		formData.append("id", id)

		deleteBank(formData).then(res => {
			console.log(res);
			console.log(formData);
			if (res.code == 1) {
				cardList.value = res.data
				Toast(res.msg)
				setTimeout(() => {
					getCardList()
				}, 1000)
			} else {
				Toast(res.msg)
			}
		})

	}

	onMounted(() => {
		getCardList();
	});

	//加载银行卡列表
	const getCardList = async () => {
		// cardType.value = 2
		let formData = new FormData();
		const res = await getBankCard(formData)
		if (res.code == 1) {
			cardList.value = res.data
			// Toast(res.msg)
			console.log("cardList:", res.data);
		} else {
			Toast(res.msg)
		}
	};

	//  添加银行卡
	const addBand = (num : number) => {
		const resToast = ref('手机号码，银行名称，银行卡号，持有人缺一不可！')
		if (num === 1) {
			if (dataList.mobile == '', dataList.bankname == '', dataList.bankholder == '', dataList.banknumber == '') {
				Toast(resToast.value)
				return
			} else {
				cardType.value = 1
				title.value = '银行卡管理'
			}
		} else {
			cardType.value = 2
			title.value = '添加银行卡'
			return
		}
		let type = Number(checked1.value);
		let formData = new FormData();
		formData.append("mobile", dataList.mobile)
		formData.append("bankname", dataList.bankname)
		formData.append("bankholder", dataList.bankholder)
		formData.append("banknumber", dataList.banknumber)
		formData.append("status", 0)
		formData.append("type", type)
		addBankCard(formData).then(res => {
			console.log(res);
			console.log(formData);
			if (res.code == 1) {
				cardList.value = res.data
				Toast(res.msg)
				setTimeout(() => {
					getCardList()
				}, 1000)
			} else {
				Toast(res.msg)
			}
		})

	}

	// 定义onClickLeft方法
	const onClickLeft = () => history.back();
	const onSubmit = () => Toast('点击按钮');

	const changestatus = (index : any) => {
		let item = cardList.value[index];
		// console.log(item)
		if (item.status == 1) {
			return false;
		}

		let formData = new FormData();
		formData.append("id", item.id)
		formData.append("status", 1)
		changeDefault(formData).then(res => {
			console.log(res);
			console.log(formData);
			if (res.code == 1) {
				cardList.value = res.data
				Toast(res.msg)
				setTimeout(() => {
					getCardList()
				}, 1000)
			} else {
				Toast(res.msg)
			}
		})

		return false;
	}
</script>

<style lang="less" scoped>
	@import url(../../../../style/common.css);

	.van-nav-bar {
		height: 52px;
		margin-top: 34px !important;
	}

	.addBankCard {
		background: #F6F7F9;
		width: 100%;
	}

	.content {
		height: calc(100vh - 87px);
		overflow: auto;
		padding: 15px;

		.van-cell {
			text-align: left;
		}

		.van-radio-group {
			padding: 0.26667rem 0.42667rem;
		}
	}


	:deep(.van-nav-bar__left .van-badge__wrapper) {
		color: #272635;
	}
</style>